﻿/*

 * @Author: xiangrikui 1755283163@qq.com

 * @Date: 2024-06-17 17:02:29

 * @LastEditors: xiangrikui 1755283163@qq.com

 * @LastEditTime: 2024-06-22 01:01:35

 * @FilePath: \项目\src\pages\Shopping\index.tsx

 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE

 */

import { useState } from 'react';

import { Tabs } from 'antd';

import type { TabsProps } from 'antd';

import TimePager from './Time';

import DemoPie from './Pie';

import DemoLine from './Line';

import DemoColumn from './Column';

import 'moment/locale/zh-cn';

import { statistics } from '@/services/demo/statistics';

import { excMtd } from '@/services/demo/excMtd';

import { category } from '@/services/demo/category';

const ShoppingPager = (   ) => {
  const [prevBegin, setPrevBegin] = useState('');

  const [prevEnd, setPrevEnd] = useState('');

  const [statisticsData, setstatisticsData] = useState(null);

  const [categoryData, setcategoryData] = useState(null);

  const [excMtdData, setexcMtdData] = useState(null);

  const [startTime, setstartTime] = useState('');

  const [endTime, setendTime] = useState('');

  // const [lineData1,setLineData1] = useState([null]);

  // const [lineData2,setLineData2] = useState([null]);

  // const [columnData1,setcolumnData1] =useState([null]);

  // const [columnData2,setcolumnData2] =useState([null]);

  // const [pieData1,setpieData1] = useState([null]);

  // const [pieData2,setpieData2] = useState([null]);

  //折线图返回数据

  // dateList

  // exchangeAmount

  //柱状图返回数据

  // categoryList

  // exchangeAmount

  //饼图返回数据

  // equityTypeList

  // exchangeAmount

  const handleTimeRangeChange = (begin, end) => {
    setstartTime(begin);

    setendTime(end);

    // 在这里处理开始时间和结束时间的逻辑，可以将它们传递给其他组件或进行其他操作
  };

  console.log('接收到的开始时间：', startTime);

  console.log('接收到的结束时间：', endTime);

  //折线图接口

  //钩子挂载

  const statisticsRangeChange = async () => {
    // 在这里处理开始时间和结束时间的逻辑，可以将它们传递给其他组件或进行其他操作

    console.log('折线图接收到的开始时间：', startTime);

    console.log('折线图接收到的结束时间：', endTime);

    try {
      const res = await statistics(startTime, endTime); // 调用统计数据请求函数

      // 处理获取到的数据，可以根据需要更新状态或进行其他操作

      console.log('获取到的统计数据：', res);

      // 更新 prevBegin 和 prevEnd 状态

      setPrevBegin(startTime);

      setPrevEnd(endTime);

      setstatisticsData(res.data);

      // setLineData1(res.data.dateList);

      // setLineData2(res.data.exchangeAmount);
    } catch (error) {
      console.error('Error fetching statistics:', error);

      // 处理错误情况，例如显示错误消息给用户
    }
  };

  // useEffect(() => {

  statisticsRangeChange();

  // }, []);

  // 初始打印

  console.log('开始时间' + prevBegin + '结束时间' + prevEnd);

  //柱状图接口

  const categoryRangeChange = async () => {
    // 在这里处理开始时间和结束时间的逻辑，可以将它们传递给其他组件或进行其他操作

    console.log('柱状图接收到的开始时间：', startTime);

    console.log('柱状图接收到的结束时间：', endTime);

    try {
      const res = await category(startTime, endTime); // 调用统计数据请求函数

      // 处理获取到的数据，可以根据需要更新状态或进行其他操作

      console.log('获取到的统计数据：', res);

      // 更新 prevBegin 和 prevEnd 状态

      setPrevBegin(startTime);

      setPrevEnd(endTime);

      setcategoryData(res.data);

      // setcolumnData1(res.data.categoryList);

      // setcolumnData2(res.data.exchangeAmount);
    } catch (error) {
      console.error('Error fetching statistics:', error);

      // 处理错误情况，例如显示错误消息给用户
    }
  };

  // useEffect(() => {

  categoryRangeChange();

  // }, []);

  // 初始打印

  console.log('开始时间' + prevBegin + '结束时间' + prevEnd);

  // 数据大盘圆盘图

  const excMtdRangeChange = async () => {
    // 在这里处理开始时间和结束时间的逻辑，可以将它们传递给其他组件或进行其他操作

    console.log('圆盘图接收到的开始时间：', startTime);

    console.log('圆盘图接收到的结束时间：', endTime);

    try {
      const res = await excMtd(startTime, endTime); // 调用统计数据请求函数

      // 处理获取到的数据，可以根据需要更新状态或进行其他操作

      console.log('获取到的统计数据：', res);

      // 更新 prevBegin 和 prevEnd 状态

      setPrevBegin(startTime);

      setPrevEnd(endTime);

      setexcMtdData(res.data);

      // setpieData1(res.data.equityTypeList);

      // setpieData2(res.data.exchangeAmount);
    } catch (error) {
      console.error('Error fetching statistics:', error);

      // 处理错误情况，例如显示错误消息给用户
    }
  };

  // useEffect(() => {

  excMtdRangeChange();

  // }, []);

  // 初始打印

  console.log('开始时间' + prevBegin + '结束时间' + prevEnd);

  // useEffect(() => {

  //   // 模拟初始化数据

  //   const initialstatisticsData = null;

  //   const initialcategoryData = null;

  //   const initialexcMtdData = null;

  //   setstatisticsData(initialstatisticsData);

  //   setcategoryData(initialcategoryData);

  //   setexcMtdData(initialexcMtdData);

  //   // 这里不调用接口获取数据，而是直接使用初始化的数据

  // }, []);

  const items: TabsProps['items'] = [
    {
      key: '1',

      label: '兑换量',

      children: <DemoLine data={statisticsData} />,

      // children: <DemoLine  data={{ lineData1, lineData2}}/>,
    },

    {
      key: '2',

      label: '销量Top20',

      children: <DemoColumn data={categoryData} />,

      // children: <DemoColumn  data={{ columnData1, columnData2 }}/>,
    },

    {
      key: '3',

      label: '兑换方式',

      children: <DemoPie data={excMtdData} />,

      // children: <DemoPie  data={{ pieData1, pieData2 }}/>,
    },
  ];

  //tabs改变

  const onChange = (key: string) => {
    console.log(key);
  };

  return (
    <>
      {/* 接口在页面出现的时候出现，在选完日期后，不调用接口 */}

      <TimePager onTimeRangeChange={handleTimeRangeChange} />

      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </>
  );
};

{
  /* <div>

    {

   <DemoLine data={statisticsData} /> // 将数据作为 props 传递给子组件

     }

      {

   <DemoPie data={excMtdData} /> // 将数据作为 props 传递给子组件

     }

      {

        <DemoColumn data={excMtdData} /> // 将数据作为 props 传递给子组件

     }



</div> */
}

export default ShoppingPager;
